<template>
  <div class="container">

    <div class="cai_pu_gai_lan">
      <el-row>
        <el-col :span="10">
          <el-image
              style="width: 565px;height: 310px"
              src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320">
          </el-image>
        </el-col>
        <el-col :span="8" :offset="4">
          <el-row>
            <el-col :span="12">
              <h1>{{ caipuDetail.caipuList.cookbookName }}</h1>
            </el-col>
            <el-col :span="12">
              <h3><i class="el-icon-view"></i>浏览量:{{ caipuDetail.caipuList.views }}<br>
                <i class="el-icon-star-on"></i>收藏量:{{ caipuDetail.caipuList.favorite }}</h3>
            </el-col>
          </el-row>
          <el-row>
            <p>
              &emsp;&emsp;{{ caipuDetail.caipuSummary.summary }}
            </p>
          </el-row>
          <el-row>
            <el-tag type="success">{{ caipuDetail.caipuList.tags }}</el-tag>
          </el-row>

          <el-divider></el-divider>

          <el-row>
            <i class="el-icon-star-on" v-show="this.guanzhu">
              <el-link
                  @click="guanzhu_or_quxiao"
                  v-show="this.guanzhu">
                取消收藏
              </el-link>

            </i>
            <i class="el-icon-star-off" v-show="!this.guanzhu">
              <el-link
                  @click="guanzhu_or_quxiao"
                  v-show="!this.guanzhu">
                收藏该菜谱
              </el-link>
            </i>

            &emsp;&emsp;
            <i class="el-icon-s-opportunity">
              <el-link>点赞</el-link>
            </i> &emsp;&emsp;
            <i class="el-icon-share">
              <el-link>分享</el-link>
            </i></el-row>
          <el-row>
            <el-button
                style="margin-left: 90px;margin-top: 20px"
                >加入今日菜谱</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <!--主料+辅料-->
    <div>
      <h2>主料</h2>
      <el-row>
        <el-col :span="4" :offset="1" v-for="i in caipuDetail.caipuZhuLiao">
          <div class="shicai">
            <div v-if="i.zhuliaoName">名称：{{ i.zhuliaoName }}</div>
            <div v-if="i.shuliang">分量：{{ i.shuliang }}</div>
          </div>
        </el-col>
      </el-row>


      <h2>辅料</h2>
      <el-row>
        <el-col :span="4" :offset="1" v-for="i in caipuDetail.caipuFuLiao">
          <el-card class="shicai">
            <div v-if="i.fuliaoName">辅料名称：{{ i.fuliaoName }}</div>
            <div v-if="i.fenliang ">辅料分量：{{ i.fenliang }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>

    <!--做法-->
    <div>
      <h2>做法</h2>
      <el-row v-for="i in caipuDetail.caipuBuZhous" style="margin-bottom: 25px">
        <el-col :span="2">步骤{{ i.stepOrder }}：</el-col>
        <el-col :span="19">
          <el-row>
            <el-image
                style="width: 360px;height: 245px"
                src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
          </el-row>
          <el-row>&emsp;&emsp;{{ i.stepIntroduce }}</el-row>
        </el-col>
      </el-row>

    </div>

    <!--菜谱详情信息：{{ caipuDetail }}
    <hr>
    是否关注：{{ guanzhu }}-->
  </div>
</template>

<script>
export default {
  name: "detail",
  data: function () {
    return {
      // 菜谱详情信息
      caipuDetail: {},
      // 用户id+菜谱编号
      uidAndCid: {
        userId: '',
        cookbookId: ''
      },
      guanzhu: false
    }
  },
  mounted() {
    let _this = this;
    _this.getCaipuDetailById();
    _this.isGuanZhu();
  },
  methods: {
    // 通过菜谱id 获取该菜谱的信息
    async getCaipuDetailById() {
      let _this = this;
      console.log(_this.$route.params.id)
      let {data: res} = await _this.$http.get(process.env.VUE_APP_SERVER + 'caipu-list/' + _this.$route.params.id)
      _this.caipuDetail = res.data
      // console.log(_this.caipuLists)
    },
    // 判断该用户是否关注了此菜谱
    async isGuanZhu() {
      let _this = this;
      _this.uidAndCid.userId = SessionStorage.get("SESSION_KEY_LOGIN_MEMBER").userId

      if(_this.uidAndCid.userId ===undefined){
        return
      }

      _this.uidAndCid.cookbookId = _this.$route.params.id
      console.log('用户信息：' + _this.uidAndCid.userId + ' 菜谱id：' + _this.$route.params.id)
      console.log(_this.uidAndCid)
      let {data: res} = await _this.$http.get(
          process.env.VUE_APP_SERVER + 'user-cookbook/is-favorite?uid=' + _this.uidAndCid.userId + '&cid=' + _this.uidAndCid.cookbookId)

      console.log("？？？？？？？" + res.data)
      if (res.data !== false) {
        _this.guanzhu = true
      } else {
        _this.guanzhu = false
      }
      console.log("判断该用户是否关注该菜谱——->" + _this.guanzhu)
    },
    // 判断该用户是否关注了此菜谱
    async guanzhu_or_quxiao() {
      let _this = this;
      _this.uidAndCid.userId = SessionStorage.get("SESSION_KEY_LOGIN_MEMBER").userId
      _this.uidAndCid.cookbookId = _this.$route.params.id
      console.log('用户信息：' + _this.uidAndCid.userId + ' 菜谱id：' + _this.$route.params.id)
      console.log(_this.uidAndCid)
      let {data: res} = await _this.$http.get(
          process.env.VUE_APP_SERVER + 'user-cookbook/favorite?uid=' + _this.uidAndCid.userId + '&cid=' + _this.uidAndCid.cookbookId)

      // 再次判断下是否关注了该菜谱
      let {data: res1} = await _this.$http.get(
          process.env.VUE_APP_SERVER + 'user-cookbook/is-favorite?uid=' + _this.uidAndCid.userId + '&cid=' + _this.uidAndCid.cookbookId)

      _this.isGuanZhu()

      // console.log("res1"+res1.data)
      // if (res1.data.data !== false) {
      //   _this.guanzhu = true
      // } else {
      //   _this.guanzhu = false
      // }
    }
  }
}
</script>

<style scoped>
.shicai {
  width: 170px;
  height: 40px;
  margin-top: 5px;
  padding: 10px;
  background-color: #e2e1e1;
  border-radius: 20px;
}

.cai_pu_gai_lan {
  width: 1100px;
  /*height: 600px;*/
  background-color: #ddfcf0;
}

.container {
  margin: 0 auto;
  width: 1100px;
  /*height: 500px;*/
  background-color: antiquewhite;
}
</style>